import * as React from 'react';
import { IEditorDragTextureMap, textureMapList } from '../data';
import './EditorTextureMapping.scss';
import { EditorModels } from '@/view/editor/ts/EditorModels';
import { EVENT_DRAG_TYPE, EnumDragType } from '../../EditorContent/EditorContent';
export interface IEditorMaterialProps {
  editorScene: EditorModels;
}

export default function EditorMaterial(props: IEditorMaterialProps) {
  /** 贴图拖拽事件开始 */
  const dragStartHandle = (
    e: React.DragEvent<HTMLImageElement>,
    dragTextureMap: IEditorDragTextureMap,
  ) => {
    props.editorScene.$emit(EVENT_DRAG_TYPE, EnumDragType.TEXTURE_MAP_DRAG);
    const image = new Image();
    image.src = dragTextureMap.imageUrl;
    image.width = 30;
    image.height = 30;
    image.onload = () => {
      e.dataTransfer.setDragImage(image, 0, 0);
      props.editorScene.setCurrentDragTextureMap(dragTextureMap.textureMapImage);
    };
  };

  /** 贴图拖拽事件结束 */
  const dragEndHandle = (
    e: React.DragEvent<HTMLImageElement>,
    dragMaterial: IEditorDragTextureMap,
  ) => {
    const currentDragTextureMap = props.editorScene.currentDragTextureMap;
    if (currentDragTextureMap) {
      props.editorScene.currentDragTextureMap = null;
      props.editorScene.currentDragMesh = undefined;
    }
  };

  return (
    <div className="editorTextureMap">
      {textureMapList.map((item) => {
        return (
          <div className="itemBox" key={item.name}>
            <img
              src={item.imageUrl}
              onDragStart={(e) => {
                dragStartHandle(e, item);
              }}
              onDragEnd={(e) => {
                dragEndHandle(e, item);
              }}
              draggable="true"
            />
            <div className="name">{item.name}</div>
          </div>
        );
      })}
    </div>
  );
}
